<template>
  <div class="box">
    <div class="content">
      <div v-for="item in tool" class="item" :key="item.id">
        <div class="raduis"></div>
        <div class="title">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const input = ref('')
const tool = [
  {
    id: 1,
    title: '日照分析',
    icon: '/static/icon/poi.png'
  },
  {
    id: 2,
    title: '可视域',
    icon: '/static/icon/poi.png'
  },
  {
    id: 3,
    title: '方量分析',
    icon: '/static/icon/poi.png'
  },
  {
    id: 4,
    title: '地表透明',
    icon: '/static/icon/poi.png'
  },
  {
    id: 5,
    title: '地形开挖',
    icon: '/static/icon/poi.png'
  },
  {
    id: 6,
    title: '坡度坡向',
    icon: '/static/icon/poi.png'
  }
]
setTimeout(() => {
 var a = document.getElementsByClassName("cesium-viewer-animationContainer")[0];
 console.log(a);
 
}, 2000);
</script>
<style >
  .cesium-viewer-animationContainer,.cesium-viewer-timelineContainer{
    bottom: 30px !important;
  }
</style>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 16px;
    .item:nth-of-type(3n) {
      margin-right: 0;
    }

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 15px;
      width: 95px;
      padding: 10px 0;
      cursor: pointer;
      &:hover {
        background-color: #149ec98a;
        border-radius: 8px;
      }
    }

    .raduis {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #d0d1d1;
    }
    .title {
      margin-top: 10px;
    }
  }
}
</style>